/**
 * http://www.xiumu.org/technology/style-checkboxes-with-css.shtml
 */
input[type=checkbox]{
  visibility : hidden;
}
.checkboxOne{
  width : 40px;
  height : 10px;
  background : #555;
  margin : 20px 80px;
  position : relative;
  border-radius : 3px;
}
.checkboxOne label{
  display : block;
  width : 16px;
  height : 16px;
  border-radius : 50%;
  
  -webkit-transition : all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition : all .5s ease;
  -ms-transition : all .5s ease;
  
  cursor : pointer;
  position : absolute;
  top : -3px;
  left : -3px;
   background : #ccc;
}
/**
 * Move the slider in the correct position if the checkbox is clicked
 */
.checkboxOne input[type=checkbox]:checked + label {
  left : 27px;
}
.checkboxTwo {
  width : 120px;
  height : 40px;
  background : #333;
  margin : 20px 60px;
  
  border-radius : 50px;
  position : relative;
}